<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出的显示和隐藏效果</title>
  <script src="../jquery/jquery-3.3.1.min.js"></script>
  <style>
    #ele_div{
      margin: auto;
      padding: 10px;
      width: 500px;
      height: 300px;
      border: 2px lightgray;
      border-radius: 5px;
      background-color: lightpink;
    }
    img{
      width: 100%;
      height: 100%;
      display: none;
    }
    #ele_div2{
      margin: auto;
      font-size: 20px;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
    }
  </style>
  <script>
    $(function (){
        $("#ele_a1").click(function (){
            $("#ele_img").fadeIn(5000);
        });
      $("#ele_a2").click(function (){
          $("#ele_img").fadeOut();
      });
      $("#ele_a3").click(function (){
        $("#ele_img").fadeIn("slow");
      });
        $("#ele_a4").click(function (){
            $("#ele_img").fadeIn(3000,function (){
                $("#ele_div").css("backgroundColor","lightblue");
            });
        });
        var flag=false;
        $("#ele_a5").click(function (){
            $("#ele_img").fadeToggle(3000,function (){
                if(flag){
                    $("#ele_div").css("backgroundColor","lightpink");
                }else {
                    $("#ele_div").css("backgroundColor","lightblue");
                }
                flag=!flag;
            });
        });
        $("#ele_a6").click(function (){
            $("#ele_img").fadeTo(1000,0.2);
        });
    });
  </script>
</head>
<body>
<div id="ele_div">
  <img id="ele_img" src="../img/1molihua.png"/>

</div>
<div id="ele_div2">
    <a id="ele_a1" href="javascript:void(0);">淡入显示</a>
    <a id="ele_a2" href="javascript:void(0);">淡出隐藏</a>
    <a id="ele_a3" href="javascript:void(0);">speed参数</a>
    <a id="ele_a4" href="javascript:void(0);">回调函数</a>
    <a id="ele_a5" href="javascript:void(0);">开关函数</a>
    <a id="ele_a6" href="javascript:void(0);">褪色效果</a>
</div>
</body>
</html>